<template>
    <div>
        <page-header title="标签栏" content="功能类似于浏览器的标签栏，支持右键操作" />
        <page-main>
            <p>访问侧边栏导航里的任意路由，都会在标签栏里自动创建一个标签。</p>
            <p>除了在标签栏里操作关闭标签，你也可以使用全局方法关闭当前页面的标签。但如果当前只有一个标签时，则无法关闭。</p>
            <el-button @click="close">关闭当前标签页</el-button>
        </page-main>
        <page-main>
            <p>作者寄语：</p>
            <p>做这个功能只是证明别家的中后台框架有的功能，我们也有，并且不管是界面上还是交互上，都做得比别家更好。但尽管如此，还是不推荐大家使用标签栏这个功能，这是一个给自己挖坑的功能，如果你感兴趣就继续阅读下面几点举例。</p>
            <ol>
                <li>
                    <p>你的标签会越开越多。标签栏的原理其实就是监听路由的变化，为每一个路由都创建一个标签。也就是说，你做一些简单的操作，中间跳转了几个页面，就会打开几个标签，这有点像你访问一个网页，点击页面上任何一个 a 链接都是打开新页面，这是很不合理的。当然你可能会想到，可以路由跳转，但标签页不增加，这就引出了第二个问题。</p>
                </li>
                <li>
                    <p>你将不能随意使用浏览器返回操作。首先浏览器自己的标签页之间的历史记录是独立的，也就是说你在一个标签页里进行前进、后退操作，是不会影响到其它标签的，但框架里的标签页无法做到独立管理（你可以试着点击左侧导航，多开几个标签页，再进行后退操作，你会发现页面在几个标签里依次后退），别家框架也是一样的问题。</p>
                    <p>举个场景，你从列表页进入详情页查看详情，查看完后通过 history.go(-1) 或者 this.$router.go(-1) 进行后退，返回到列表页。在没有标签栏功能的时候，这没问题，但如果有的标签栏功能，用户如果在详情页的时候，先查看了其它标签页，再切换回详情页，这时候如果进行退后操作，页面会进入刚访问的其它标签页，而不是退回到列表页。因为这部分的交互和浏览器标签页的交互完全不一样，无法达到用户的预期。</p>
                </li>
                <li>
                    <p>最后一点可能会有影响，就是开启标签栏可能会比较吃性能。首先标签栏这功能的目的是为了提升操作效率，通过多开标签可以在几个标签之间切换操作，既然要切换操作，那就逃不开页面缓存，因为如果每次切换标签都是全新打开，那也没有效率可言，所以任何一个标签页都会通过 keep-alive 组件进行缓存，你打开的标签越多，缓存的组件就越多，这对浏览器来说，是比较大的性能开销。</p>
                </li>
            </ol>
            <p>所以要使用这功能，请斟酌好我刚说的情况，尤其是给甲方做项目的话，前两点很有可能会被甲方认为是系统 bug ，你可能需要花时间去和甲方解释这不是 bug ，而是设计如此，并且也是被迫无奈的设计，因为就连我，也没有更好的解决办法。</p>
            <p>当然如果仔细思考下，这真的是框架的刚需么？浏览器自己就有标签页功能，为什么不手动在浏览器里多开一个标签呢？</p>
        </page-main>
    </div>
</template>

<script>
export default {
    methods: {
        close() {
            this.$tabbarClose()
        }
    }
}
</script>
